<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">Condition Search</span>
        </div>
      </template>
      <el-form
        :inline="true"
        :model="searchInfo"
        class="demo-form-inline"
        ref="searchInfo"
      >
        <el-row>
          <el-form-item label="FirstBirth:" prop="firstBirth.lower_limit">
            <el-input
              style="width: 120px"
              v-model="searchInfo.firstBirth.lower_limit"
              placeholder="lower limit"
            ></el-input>
          </el-form-item>
          <el-form-item><i class="el-icon-right"></i></el-form-item>
          <el-form-item prop="firstBirth.upper_limit">
            <el-input
              style="width: 120px"
              v-model="searchInfo.firstBirth.upper_limit"
              placeholder="upper limit"
            ></el-input>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item label="BreastBiopsiesNum:">
            <el-radio-group v-model="searchInfo.breastBiopsiesNum">
              <el-radio label="0">0</el-radio>
              <el-radio label="1">1</el-radio>
              <el-radio label="≥2">≥2</el-radio></el-radio>
              <el-radio label="All">All</el-radio></el-radio>
            </el-radio-group>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item label="BreastCancerFamilyNum:">
            <el-radio-group v-model="searchInfo.breastCancerFamilyNum">
              <el-radio label="0">0</el-radio>
              <el-radio label="1">1</el-radio>
              <el-radio label="2">2</el-radio></el-radio>
              <el-radio label="≥3">≥3</el-radio></el-radio>
              <el-radio label="All">All</el-radio></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="MenarcheAge:" prop="menarcheAge.lower_limit">
            <el-input
              style="width: 120px"
              v-model="searchInfo.menarcheAge.lower_limit"
              placeholder="lower limit"
            ></el-input>
          </el-form-item>
          <el-form-item><i class="el-icon-right"></i></el-form-item>
          <el-form-item prop="menarcheAge.upper_limit">
            <el-input
              style="width: 120px"
              v-model="searchInfo.menarcheAge.upper_limit"
              placeholder="upper limit"
            ></el-input>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item label="Age:" prop="age.lower_limit">
            <el-input
              style="width: 120px"
              v-model="searchInfo.age.lower_limit"
              placeholder="lower limit"
            ></el-input>
          </el-form-item>
          <el-form-item><i class="el-icon-right"></i></el-form-item>
          <el-form-item prop="age.upper_limit">
            <el-input
              style="width: 120px"
              v-model="searchInfo.age.upper_limit"
              placeholder="upper limit"
            ></el-input>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item label="Registration Time:" prop="reg_time">
            <el-date-picker
              v-model="searchInfo.reg_time"
              type="daterange"
              range-separator="to"
              start-placeholder="Start time"
              end-placeholder="End time"
            >
            </el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col
            :span="6"
            :offset="18"
            style="text-align: end; padding-top: 10px; padding-right: 10px"
          >
            <el-button
              type="primary"
              size="mini"
              @click="searchForm(searchInfo)"
              >SEARCH</el-button
            >
            <el-button type="info" size="mini" @click="resetForm('searchInfo')"
              >RESET</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <br />
    <div
      :style="{ height: '500%', width: '100%' }"
      ref="mykeyFactorAnalysis"
    ></div>
  </div>
</template>

<script>
export default {
  name: "KeyFactorAnalysis",
  data() {
    return {
      option: {
        title: {
          text: "Statistical Analysis of Key Factors",
          textStyle: {
            fontSize: 25,
          },
          subtext:
            "Statistical analysis of key factors under different breast cancer risk values",
          left: "left",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          textStyle: {
            fontSize: 20,
          },
          left: "right",
          //orient: "vertical",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%", //控制数据区间间隔
          top: "20%", //控制到顶部间距
          containLabel: true,
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { show: true, readOnly: false }, //数据视图
            magicType: { show: true, type: ["line","stack"] }, //改变为折线图
            restore: { show: true }, //重置
            saveAsImage: { show: true }, //保存图片
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: [
              "0%~10%",
              "10%~20%",
              "20%~30%",
              "30%~40%",
              "40%~50%",
              "50%~60%",
              "60%~70%",
              "70%~80%",
              "80%~90%",
              "90%~100%",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "MenarcheAge",
            type: "bar",
            barGap: 0,
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301, 334, 390, 220, 182, 191, 234, 290],
          },
          {
            name: "FirstBirth",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 320, 332, 301, 334, 390],
          },
          {
            name: "BreastBiopsiesNum",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190, 98, 77, 101, 99, 40],
          },
          {
            name: "BreastCancerFamilyNum",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            data: [98, 77, 101, 99, 40, 150, 232, 201, 154, 190],
          },
          {
            name: "Age",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            data: [141, 149, 120, 156, 179, 116, 67, 104, 122, 128],
          },
          {
            name: "searchResult",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            data: [241, 139, 110, 116, 179, 116, 167, 136, 120, 128],
          },
        ],
      },
      searchInfo: {
        menarcheAge: { lower_limit: "", upper_limit: "" }, //月经初产年龄
        firstBirth: { lower_limit: "", upper_limit: "" }, //初产年龄
        breastBiopsiesNum: "All", //乳腺活检次数
        age: { lower_limit: "", upper_limit: "" }, //年龄
        breastCancerFamilyNum: "All", //患有乳腺癌家属人数
        reg_time: [], //注册时间
      },
    };
  },
  mounted() {
    this.keyFactorAnalysis();
  },
  methods: {
    keyFactorAnalysis() {
      let myChart = this.$echarts.init(this.$refs.mykeyFactorAnalysis);
      myChart.setOption(this.option);
    },
    //清空搜索条件
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.keyFactorAnalysis();
    },
    searchForm(formName) {
      //搜索表单信息
      console.log(formName);
      let tempory1 = this.option.series[0].data;
      this.option.series[0].data = this.option.series[3].data;
      this.option.series[3].data = tempory1;

      let tempory2 = this.option.series[1].data;
      this.option.series[1].data = this.option.series[2].data;
      this.option.series[2].data = tempory2;
      this.keyFactorAnalysis();
    },
  },
};
</script>

<style scoped lang="scss">
.card-header {
  border-radius: 25px;
  background: #581d1d42;
}
.box-card {
  border-radius: 25px;
  background: #d6d5d542;
}

</style>